<template>
  <window class="m-teacher-commission-detail" ref="win" title="筛选范围">
    <div class="wrapper">
      <div class="am-u-lg-12 am-form-group">
        <el-select size="small" class="am-u-sm-12 am-u-md-12 am-u-lg-6"
                   v-model="areaTeamId" placeholder="请选择区域">
          <el-option
            v-for="item in areaTeams"
            :key="item.areaTeamId"
            :label="item.areaTeamName"
            :value="item.areaTeamId">
          </el-option>
        </el-select>
      </div>
      <div class="list-item" v-for="item in list">
        <div class="am-u-lg-12">
          <el-select size="small" class="am-u-sm-12 am-u-md-12 am-u-lg-6"
                     v-model="item.periodId" placeholder="请选择期数">
            <el-option
              v-for="period in periods"
              :key="period.periodId"
              :label="period.periodName"
              :value="period.periodId">
            </el-option>
          </el-select>
        </div>
        <el-checkbox-group v-model="item.checkList">
          <el-checkbox :disabled="!item.periodId" v-for="r in item.timeTypeList" :label="r.type">
            <span>{{r.label}}：</span>
            <el-date-picker
              :disabled="!item.periodId || item.checkList.indexOf(r.type) === -1"
              v-model="r.time"
              type="daterange"
              placeholder="选择日期范围">
            </el-date-picker>
          </el-checkbox>
        </el-checkbox-group>
      </div>
      <div class="btn-add-del">
        <el-button size="small" type="primary" @click="handleAdd">添加</el-button>
        <el-button size="small" type="primary" :disabled="list.length === 1" @click="handleDel">删除</el-button>
      </div>
      <div>
        <el-button type="success" @click="handleSave">确认</el-button>
      </div>
    </div>
  </window>
</template>

<script>
import io from '../../lib/io'
import moment from 'moment'
const startDate = moment().startOf('month').format("YYYY-MM-DD")
const endDate = moment().endOf('month').format("YYYY-MM-DD")
  export default{
    data: function () {
      return {
        areaTeamId : window.config.areaTeams[0] && window.config.areaTeams[0].areaTeamId || '' ,
        periodId: '',
        periods: [],
        list: [{
          periodId: '',
          checkList: [],
          timeTypeList: [{
            type: 0,
            label: '新生科数',
            time: [
              startDate,
              endDate,
            ],
          },{
            type: 1,
            label: '老生科数',
            time: [
              startDate,
              endDate,
            ],
          },{
            type: 2,
            label: '顺期科数',
            time: [
              startDate,
              endDate,
            ],
          },{
            type: 3,
            label: '跨期科数',
            time: [
              startDate,
              endDate,
            ],
          }],
        }]
      }
    },
    watch: {
      areaTeamId () {
        this.periodId = ''
        this.list.map(val => {
          val.periodId = ''
        })
        this.loadPeriodData()
      }
    },
    computed: {
      areaTeams: function() {
        var options = (this.$root.config.areaTeams || [])
          .map(function(item) {
            return { areaTeamId: item.areaTeamId, areaTeamName: item.name }
          })
        return options
      },
    },
    methods:{
      handleAdd () {
        this.list.push({
          periodId: '',
          checkList: [],
          timeTypeList: [{
            type: 0,
            label: '新生科数',
            time: [
              startDate,
              endDate,
            ]
          },{
            type: 1,
            label: '老生科数',
            time: [
              startDate,
              endDate,
            ]
          },{
            type: 2,
            label: '顺期科数',
            time: [
              startDate,
              endDate,
            ]
          },{
            type: 3,
            label: '跨期科数',
            time: [
              startDate,
              endDate,
            ]
          }]
        })
      },
      handleDel () {
        this.list.pop()
      },
      handleSave () {
        let areaTeamName = ''
        this.areaTeams.map(val => {
          if (val.areaTeamId === this.areaTeamId) {
            areaTeamName = val.areaTeamName
          }
        })
        this.$emit('completed', {
          areaTeamName: areaTeamName,
          value: this.list,
        })
        this.$refs.win.close()
      },
      loadPeriodData: function() {
        var _this = this
        if (!this.areaTeamId) {
          return
        }
        io.post(io.apiAdminPeriodListForAreaTeam, {
          areaTeamId: this.areaTeamId
        }, function(ret) {
          if (ret.success) {
            _this.periods = ret.data.map(function(item) {
              return { periodId: item.periodId, periodName: item.periodName }
            })
          } else {
            _this.$alert(ret.desc)
          }
        })
      },
      show:function(){
        this.$refs.win.show( { width : 700, height: 500 } )
        this.loadPeriodData()
      }
    }
  }

</script>
<style lang="less" scoped>
  .m-teacher-commission-detail {
    .wrapper {
      padding: 30px;
    }
    .el-checkbox-group {
      clear: both;
      margin-bottom: 15px;
    }
    .el-select {
      margin-bottom: 5px;
    }
    .list-item {
      margin-left: 20px;
    }
    .el-checkbox {
      display: block;
      width: 300px;
      margin-left: 20px;
    }
    .btn-add-del {
      text-align: left;
      margin-bottom: 10px;
      margin-left: 40px;
    }
  }
</style>
